<template>
    <div id="invoicelist" style="">
        <!--发票内容-s-->
        <div class="dizhi-pop">
            <div class="z-Package-hrader">
                <i
                    class="z-Package-icon Package-icon-close"
                    id="invoice_list_back"
                    @click="closeFapiao()"
                ></i>
                <h5>发票信息</h5>
            </div>
            <div class="invoice_con">
                <div class="invoice_tit" v-show="invoice_desc != '不开发票'">
                    <h3>发票抬头</h3>
                    <div class="invoice_type">
                        <div class="intype_item">
                            <input
                                type="radio"
                                name="radio_title"
                                checked="checked"
                                id="intype1"
                                v-model="invoice_title"
                                @click="getinvoice_title($event)"
                                value="个人"
                            /><label for="intype1"></label><span>个人</span>
                        </div>
                        <div class="intype_item">
                            <input
                                type="radio"
                                @click="getinvoice_title($event)"
                                name="radio_title"
                                id="intype2"
                                v-model="invoice_title"
                                value="单位"
                            /><label for="intype2"></label><span>单位</span>
                        </div>
                    </div>
                </div>
                <hr class="invoice_line" />
                <div class="invoice_deta">
                    <h3>发票内容</h3>
                    <div
                        class="invoice_comdel"
                        v-show="
                            invoice_title == '单位' &&
                            invoice_desc != '不开发票'
                        "
                    >
                        <input
                            type="text"
                            id="invoice_title"
                            placeholder="请填写单位名称"
                            value=""
                            v-model="invoice_titledanwei"
                        />
                        <input
                            type="text"
                            id="taxpayer"
                            placeholder="请在此填写纳税人识别号"
                            value=""
                            v-model="InvoiceInfo.taxpayer"
                        />
                        <p>
                            开企业抬头发票，请准确填写对应的“纳税人识别号”，以免影响您的发票报销.
                        </p>
                    </div>
                    <div class="invoice_type">
                        <div class="intype_item">
                            <input
                                type="radio"
                                name="radio_cont"
                                checked="checked"
                                id="intype3"
                                value="商品明细"
                                v-model="invoice_desc"
                            /><label for="intype3"></label><span>商品明细</span>
                        </div>
                        <div class="intype_item">
                            <input
                                type="radio"
                                name="radio_cont"
                                id="intype4"
                                value="商品类别"
                                v-model="invoice_desc"
                            /><label for="intype4"></label><span>商品类别</span>
                        </div>
                        <div class="intype_item">
                            <input
                                type="radio"
                                name="radio_cont"
                                id="intype5"
                                v-model="invoice_desc"
                                value="不开发票"
                            /><label for="intype5"></label><span>不开发票</span>
                        </div>
                    </div>
                </div>
                <div class="invoice_confir">
                    <input
                        type="button"
                        id="submit_invoice"
                        value="确认"
                        @click="submitxinxi"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            InvoiceInfo: {
                invoice_title: '',
                taxpayer: '',
                invoice_desc: '',
            },

            invoice_title: '个人',
            invoice_titledanwei: '', //单位的名称
            invoice_desc: '商品明细',
        };
    },
    computed: {},
    mounted() {
        this.getxinxi();
    },
    methods: {
        // getinvoice_desc(e) {},
        getinvoice_title(e) {
            this.invoice_title = e.target.value;
        },
        // 返回发票信息给父组件
        emitFapiaodata(data) {
            this.$emit('emitFapiaodata', data);
        },
        // 关闭发票弹窗
        closeFapiao() {
            this.$emit('setisFapiao', false);
        },
        // 获取发票信息
        getxinxi() {
            axiosPost('/api/cart/invoice', {}, (res) => {
                // console.log(res);
                if (res.status != 1) {
                    // return Toast({
                    //     message: res.msg,
                    //     duration: 2000,
                    // });
                }
                // console.log(res);
                this.InvoiceInfo = res.result;

                this.invoice_title =
                    res.result.invoice_title != '个人'
                        ? '单位'
                        : res.result.invoice_title;

                this.invoice_titledanwei =
                    res.result.invoice_title == '个人'
                        ? ''
                        : res.result.invoice_title;

                this.invoice_desc = res.result.invoice_desc;
            });
        },
        // 提交发票信息
        submitxinxi() {
            if (
                this.InvoiceInfo.taxpayer.length == 0 ||
                this.InvoiceInfo.taxpayer.length == 15 ||
                this.InvoiceInfo.taxpayer.length == 18 ||
                this.InvoiceInfo.taxpayer.length == 20
            ) {
                let parms = {
                    invoice_title:
                        this.invoice_title == '个人'
                            ? this.invoice_title
                            : this.invoice_titledanwei,
                    taxpayer: this.InvoiceInfo.taxpayer,
                    invoice_desc: this.invoice_desc,
                };
                axiosPost('/api/cart/save_invoice', parms, (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.emitFapiaodata(parms);
                    this.closeFapiao();
                });
            } else {
                return Toast({
                    message: '请输入正确的纳税人识别号！',
                    duration: 2000,
                });
            }
        },
    },
};
</script>

<style lang="less" scope>
.fapiao {
}
</style>
